<template>
  <!-- 购物车列表页面 -->
  <div class="merchant-list-page">
    <!-- 顶部标题 -->
    <div class="page-header">
      <h1 class="page-title">购物车</h1>
      <p class="page-subtitle">当日会自动清空</p>
    </div>

    <!-- 商家列表 -->
    <scroll-view class="merchant-list" scroll-y :scroll-top="scrollTop">
      <div class="merchant-item" v-for="merchant in merchants" :key="merchant.id">
        <!-- 商家图片 -->
        <div class="merchant-image">
          <img style="width: 100%;height: 100%;" :src="merchant.shopLogo || '../static/imgs/dianpumoren.png'" alt="">
          <div class="image-overlay"></div>
        </div>

        <!-- 商家信息 -->
        <div class="merchant-content" @click="goToMerchant(merchant)">
          <div class="merchant-header">
            <h3 class="merchant-name">{{ merchant.shopName }}</h3>
          </div>

          <p class="merchant-desc">{{ merchant.desc }}</p>

          <div class="merchant-footer">
            <div class="priceStr-info">
              <span class="priceStr-label">价格：</span>
              <span class="priceStr-value">¥{{ merchant.priceStr }}</span>
            </div>
            <!-- <div class="quantity-info">
              <span class="quantity-label">数量：</span>
              <span class="quantity-value">{{ merchant.quantity }}</span>
            </div> -->
          </div>
        </div>

        <!-- 删除按钮 -->
        <div class="delete-btn" @click.stop="deleteCart(merchant)">
          <wd-icon name="delete" size="20px" color="#e74c3c"></wd-icon>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-if="merchants.length === 0">
        <div class="empty-icon">🛒</div>
        <div class="empty-text">购物车是空的</div>
        <div class="empty-subtext">快去添加商品吧</div>
      </div>
    </scroll-view>

    <!-- 底部导航 -->
    <bottomNav />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import bottomNav from '@/components/bottomNav.vue'
import { navTo } from '@/utils/utils'

// 滚动位置
const scrollTop = ref(0)

// 购物车数据
const merchants = ref([])
const clearTime = ref(null)
const getCartData = async () => {
   clearTime.value = setTimeout(async () => {
    const res = await Fetch(`shopping/extend/list`, {
      method: 'get',
    })
    if (res.data.code === 200) {
      res.data.rows.forEach(item => {
        const list = JSON.parse(item.extendsJson)
        item.cartItems = list.cartItems
        item.shopId = list.shopId
        item.shopName = list.shopName
        item.shopLogo = list.shopLogo
        item.shopType = list.shopType
        item.quantity = list.cartItems?.length
        item.priceStr = list.totalPrice
        item.extendId = item.extendId // 保存原始的extendId用于删除
        console.log(item, 'item');
      })
      merchants.value = res.data.rows
    } else {
      uni.showToast({
        title: res?.data?.msg || '获取购物车数据失败',
        icon: 'none'
      })
    }
  }, 500)
}

// 删除购物车
const deleteCart = async (merchant) => {
  console.log(merchant, 'merchant');

  try {
    // 显示确认对话框
    uni.showModal({
      title: '确认删除',
      content: `确定要删除 ${merchant.shopName} 的购物车吗？`,
      confirmText: '删除',
      confirmColor: '#e74c3c',
      cancelText: '取消',
      success: async (res) => {
        if (res.confirm) {
          // 调用删除接口
          const deleteRes = await Fetch(`shopping/extend/${merchant.extendId}`, {
            method: 'DELETE'
          })

          if (deleteRes.data.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })

            // 重新获取购物车数据
            await getCartData()
          } else {
            uni.showToast({
              title: deleteRes?.data?.msg || '删除失败',
              icon: 'none'
            })
          }
        }
      },
      fail: (error) => {
        console.error('显示确认对话框失败:', error)
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        })
      }
    })
  } catch (error) {
    console.error('删除购物车失败:', error)
    uni.showToast({
      title: '删除失败，请重试',
      icon: 'none'
    })
  }
}

onShow(() => {
  getCartData()
})

onHide(() => {
  clearTimeout(clearTime.value)
})
onUnload(() => {
  clearTimeout(clearTime.value)
})


// 跳转到商家详情
const goToMerchant = (merchant) => {
  // navTo(`/pages/Merchant?shopId=${merchant.id}&cartData=${encodeURIComponent(JSON.stringify(merchant.cartItems))}`)
  uni.navigateTo({
    url: `/pages/Merchant?shopId=${merchant.shopId}&cartData=${encodeURIComponent(JSON.stringify(merchant.cartItems))}&extendId=${merchant.extendId}`,
    success: (res) => {
      Fetch(`shopping/extend/${merchant.extendId}`, {
        method: 'DELETE'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.merchant-list-page {
  height: 100vh;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 0 40rpx 0rpx;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.2) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 235, 59, 0.15) 0%, transparent 50%);
    pointer-events: none;
  }

  .page-header {
    padding: 60rpx 0 30rpx;
    flex-shrink: 0;

    .page-title {
      font-size: 48rpx;
      font-weight: 800;
      color: #8d6e63;
      margin-bottom: 8rpx;
      letter-spacing: 1rpx;
    }

    .page-subtitle {
      font-size: 28rpx;
      color: rgba(141, 110, 99, 0.8);
      font-weight: 400;
    }
  }

  .merchant-list {
    flex: 1;
    height: 0;
    padding-bottom: 140rpx;

    .merchant-item {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 24rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      box-shadow:
        0 16px 32px rgba(255, 193, 7, 0.1),
        0 1px 3px rgba(255, 193, 7, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      position: relative;
      display: flex;
      align-items: stretch;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow:
          0 24px 48px rgba(255, 193, 7, 0.15),
          0 8px 24px rgba(255, 193, 7, 0.1);
      }

      &:active {
        transform: translateY(-2rpx) scale(0.98);
      }

      .merchant-image {
        width: 120rpx;
        height: 120rpx;
        position: relative;
        overflow: hidden;
        border-radius: 20rpx;
        margin: 20rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.6s ease;
        }

        .image-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg,
              transparent 0%,
              rgba(255, 193, 7, 0.05) 50%,
              rgba(255, 193, 7, 0.1) 100%);
        }
      }

      &:hover .merchant-image img {
        transform: scale(1.05);
      }

      .merchant-content {
        flex: 1;
        padding: 24rpx 24rpx 24rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;

        .merchant-header {
          margin-bottom: 12rpx;

          .merchant-name {
            font-size: 32rpx;
            font-weight: 700;
            color: #5d4037;
            line-height: 1.3;
            margin: 0;
            letter-spacing: 0.5rpx;
          }
        }

        .merchant-desc {
          font-size: 24rpx;
          color: #8d6e63;
          line-height: 1.4;
          margin-bottom: 16rpx;
          opacity: 0.9;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .merchant-footer {
          display: flex;
          gap: 24rpx;

          .priceStr-info,
          .quantity-info {
            display: flex;
            align-items: center;
            font-size: 24rpx;

            .priceStr-label,
            .quantity-label {
              color: #8d6e63;
              margin-right: 8rpx;
            }

            .priceStr-value {
              color: #e65100;
              font-weight: 600;
              font-size: 26rpx;
            }

            .quantity-value {
              color: #5d4037;
              font-weight: 600;
              font-size: 26rpx;
            }
          }
        }
      }

      .delete-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20rpx;
        border-radius: 50%;
        background: rgba(231, 76, 60, 0.1);
        transition: all 0.3s ease;
        cursor: pointer;
        flex-shrink: 0;

        &:hover {
          background: rgba(231, 76, 60, 0.2);
          transform: scale(1.1);
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 120rpx 0;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(20px);
      border-radius: 28rpx;
      border: 1px solid rgba(255, 193, 7, 0.3);

      .empty-icon {
        font-size: 80rpx;
        margin-bottom: 24rpx;
      }

      .empty-text {
        font-size: 32rpx;
        color: #8d6e63;
        font-weight: 500;
        margin-bottom: 8rpx;
      }

      .empty-subtext {
        font-size: 26rpx;
        color: rgba(141, 110, 99, 0.7);
      }
    }
  }
}
</style>
